<% title "Confirm your email" %>
<% proper_email = params[:email] || (resource.pending_reconfirmation? ? resource.unconfirmed_email : resource.email) %>
<main id="main-content" class="flex flex-1 justify-center flex-col crayons-layout">
  <style>
    <%= Rails.application.assets["setup-mode.css"].to_s.html_safe %>
  </style>
  <%= javascript_include_tag "confirmationEmail", defer: true %>

  <div class="flex flex-1 flex-col items-center justify-center relative z-elevate align-center">
    <%= render "devise/shared/error_messages", resource: resource %>
    <%= inline_svg_tag("mail.svg", aria: true, title: "Email", class: "mb-6") %>
    <h1 class="fs-2xl m:fs-3xl lh-tight fw-bold mb-4">Great! Now confirm your email address.</h1>
    <% if proper_email.present? %>
      <p class="fs-l m:fs-xl color-base-70 m:max-w-50">
        We've sent an email to <span class="fw-bold"><%= proper_email %></span>.
        Click the button inside to confirm your email.</p>
      </p>
    <% end %>
  </div>
  <div class="bg-base-10 p-4 mx-auto my-4 radius-default z-elevate">
    <button class="color-accent-brand text-underline cursor-pointer js-confirmation-button border-none p-0" role="button">Click here</button> if you didn't get the email...
  </div>

  <%= inline_svg_tag("forem-background.svg", aria: true, title: "forem background", class: "forem-background absolute bottom-0 right-0 hidden m:block") %>

  <div id="confirm-email-modal" class="hidden">
    <div>Re-enter the email address below to resend the confirmation link</div>
    <%= form_for(resource, as: resource_name, url: confirmation_path(resource_name), html: { method: :post }, data: { testid: "resend-confirmation-form" }) do |f| %>
      <div class="crayons-field mt-5 mb-3">
        <%= f.email_field :email, placeholder: "user@example.com", autocomplete: "email", aria: { label: "Confirmation email address" }, class: "crayons-textfield", required: true, value: proper_email %>
      </div>

      <div class="flex">
        <%= f.submit "Resend", role: "button", class: "crayons-btn mr-1" %>
        <button class="crayons-btn color-base-70 crayons-btn--ghost js-dismiss-button" role="button">
          Dismiss
        </button>
      </div>
    <% end %>
  </div>
</main>
